<template>
  <div class="title">
    <div class="box left-box" @click="handleBack">
      <svg-icon class="img" name="arrow-left" />
    </div>
    <div class="text">{{ text }}</div>
    <div class="box right-box">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup>
import { watch } from 'vue'
// import arrowLeft from '@/img/arrow-left.png'
import { useRouter } from 'vue-router'
import { goPageBack } from '@/utils/native'
const router = useRouter()
const props = defineProps({
  // backImg: {
  //   type: String,
  //   default: arrowLeft
  // },
  text: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: ''
  }
})

watch(
  () => props.value,
  (nv, ov) => {
    inputValue.value = nv.trim()
  }
)

const handleBack = () => {
  // XX.showToast(toast) // XX的方法
  if (props.type) {
    router.go(-1)
  } else {
    goPageBack()
  }
}
</script>

<style lang="scss" scoped>
.title {
  position: relative;
  // width: 375px; // 不能写375px，不然有竖行出现滚动条的时候会出现横向滚动条
  height: 44px;
  padding: 0 20px 0 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .left-box {
    left: 12px;
    .img {
      display: block;
      width: 24px;
      height: 24px;
    }
  }
  .right-box {
    right: 20px;
  }

  .text {
    flex: 1;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-color);
  }
}
</style>
